<template>
  <div>
    <vxe-grid ref="table" v-bind="gridOptions" v-on="gridEvents">
      <template #option="{ row }">
        <template class="table-option">
          <vxe-button status="primary" content="编辑"
                      @click="editRowEvent(row)"/>
          <vxe-button status="danger" content="删除"
                      @click="deleteRowEvent(row)"/>
        </template>
      </template>
    </vxe-grid>
  </div>
  <SysConfigEdit ref="edit" @ok="saveSuccess"/>
</template>

<script>
import {deleteConfigById, exportConfigFile, getPageConfig, importConfigFile} from "@/api/sys/config";
import {RESPONSE_CODE_SUCCESS} from "@/constant/response";
import {Message} from "view-ui-plus";
import SysConfigEdit from "./SysConfigEdit.vue";
import {getFile} from "@/util";

export default {
  name: "SysConfig",
  components: {SysConfigEdit},
  data() {
    return {
      gridOptions: {
        toolbarConfig: {
          buttons: [
            {code: 'add', name: '新增'},
            {code: 'customExport', name: '导出'},
            {code: 'customImport', name: '导入'}
          ],
        },
        pagerConfig: {
          pageSize: 10
        },
        columns: [
          {type: 'checkbox', width: 50, fixed: "left"},
          {type: 'seq', width: 60},
          {field: 'code', title: '编码', minWidth: 100},
          {field: 'name', title: '名称', minWidth: 100},
          {field: 'data', title: '配置值', minWidth: 100},
          {field: 'remark', title: '备注', minWidth: 100},
          {title: '操作', width: 150, slots: {default: 'option'}, fixed: "right"}
        ],
        formConfig: {
          items: [
            {field: 'likeCode', title: '编码：', itemRender: {name: 'input'}},
            {field: 'likeName', title: '名称：', itemRender: {name: 'input'}},
            {field: 'likeData', title: '配置值：', itemRender: {name: 'input'}},
            {field: 'likeRemark', title: '备注：', itemRender: {name: 'input'}},
            {itemRender: {name: '$button', props: {content: '查询', type: 'submit', status: 'primary'}}},
            {itemRender: {name: '$button', props: {content: '重置', type: 'reset'}}}
          ]
        },
        proxyConfig: {
          ajax: {
            query: ({page, form}) => {
              return getPageConfig({
                pageIndex: page.currentPage,
                pageSize: page.pageSize,
                ...form
              })
            }
          }
        },
      },
      gridEvents: {
        toolbarButtonClick: this.toolbarButtonClick,
      },
    }
  },
  created() {
    this.$nextTick(() => {
      this.$refs.table.commitProxy('reload')
    });
  },
  methods: {
    toolbarButtonClick({code}) {
      switch (code) {
        case 'add': {
          this.$refs.edit.show({
            title: "添加配置"
          })
          return;
        }
        case 'customExport': {
          this.exportConfig()
          return;
        }
        case 'customImport': {
          this.importConfig();
          return;
        }
        default: {
          return
        }
      }
    },
    importConfig() {
      getFile('.json').then(res => {
        let formData = new FormData()
        formData.append("file", res);
        importConfigFile(formData).then(res => {
          if (res.code !== RESPONSE_CODE_SUCCESS) {
            return
          }
          this.$refs.table.commitProxy('reload')
          Message.success("导入成功")
        })
      })
    },
    exportConfig() {
      let rows = this.$refs.table.getCheckboxRecords();
      console.log(rows)
      let ids = [];
      for (let item of rows) {
        ids.push(item.id)
      }
      if (ids.length <= 0) {
        Message.warning("至少选择一条数据")
        return
      }
      exportConfigFile({
        ids: ids
      });
    },
    editRowEvent(row) {
      this.$refs.edit.show({
        title: "修改配置",
        data: this.$utils.clone(row)
      })
    },
    saveSuccess() {
      this.$refs.table.commitProxy('reload')
    },
    deleteRowEvent(row) {
      this.$Modal.confirm({
        title: '删除配置',
        content: '确认删除配置?<br/> 名称:' + row.name + '<br/>编码:' + row.code,
        okText: '删除',
        onOk: () => {
          deleteConfigById({
            id: row.id
          }).then(res => {
            if (res.code == RESPONSE_CODE_SUCCESS) {
              this.$refs.table.commitProxy('reload')
              Message.success("删除成功")
            }
          })
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
